<template>
  <div class="about">
    <h1>对按钮组件测试</h1>
    <!-- 直接使用这个按钮组件。
    因为它是一个全局组件，不是about.vue的局部组件 -->
    <h2>1. 允许自定义内容： 按钮上的字可以自已写</h2>
    <my-button></my-button>
    <br><br>
    <my-button>我是按钮</my-button>
    <br><br>
    <my-button>点我2</my-button>
    <br><br>
    <my-headline></my-headline>
    <br><br>
    <h2>2. 允许自定义大小 </h2>
    <my-button size="mini">mini</my-button>
    <br><br>
    <my-button size="small">small</my-button>
    <br><br>
    <my-button size="medium">medium</my-button>
    <br><br>
    <my-button size="big">big按钮</my-button>
    <br><br>
    <my-button size="massive">massive</my-button>
    <br><br>
    <h2>3. 动画  两个状态，通过hover来切换</h2>
    <!-- 默认动画：水平切换 -->
    <my-button animated>
      <div slot='hidden'>$100,000</div>
      <div slot='visible'>来呀！水平方向</div>
    </my-button>
    <br><br>
    <!-- 垂直方向切换 -->
    <my-button size="massive" animated="vertical">
      <div slot='hidden'>$100,000</div>
      <div slot='visible'>来呀！垂直方向</div>
    </my-button>
    <br><br>
    <!-- 缩放切换 -->
    <!-- 4.
      click只能是对原生的dom有效
      不能直接写在组件上
      <van-button @click="hclick">
      解决：
      方法1. 在组件的内部监听click，并抛出来
      方法2. 在监听click加上.native
    -->
    <my-button animated="fade" size="mini">
      <div slot='hidden'>$100,000</div>
      <div slot='visible'>来呀！缩放</div>
    </my-button>
    <br><br>
  </div>
</template>
